<template>
  <div>
    <div v-if="loadFlag" class="loading">
      <p v-if="!loadError"><i class="iconfont icon-loading"></i> Loading...</p>
      <p v-else>加载失败，请重试<a @click="refreshData()"><i class="iconfont icon-refresh"></i></a></p>
    </div>
    <slot v-else-if="data!=''" name="data"></slot>
    <div v-else class="no-data">暂无数据！</div>
  </div>
</template>

<script>
export default {
  name: "MyLoading",
  props: {
    loadFlag: {
      type: Boolean,
      default: true,
      required: true
    },
    loadError: {
      type: Boolean,
      default: false,
      required: true
    },
    data: {
      type: Array,
      default: () => ["暂无数据"],
      required: true
    }
  },
  methods: {
    refreshData() {
      this.$emit("refresh");
    }
  }
};
</script>
